08. Name That Element!

Name That Element!

We've covered several ways to label elements already, and we just learned about two more: aria-label, and aria-labelledby.

For this exercise, we're going to see some of those labeling techniques in action! We'll put our skills to the test by figuring out the accessible name for a few elements.

Instructions

In each case, provide the label for the first (i.e., outermost) element. If the element would be hidden from the accessibility tree, type in No label as your answer. Note that HTML labelling techniques, and ARIA roles and attributes, must be used correctly in order to be effective!

QUESTION: 

<button aria-lavbel="Gumnut">
  Eucalyptus
</button>

SOLUTION:

NOTE: The solutions are expressed in RegEx pattern. Udacity uses these patterns to check the given answer

QUESTION: 

<div role="button">
  Wombat
</div>

SOLUTION:

NOTE: The solutions are expressed in RegEx pattern. Udacity uses these patterns to check the given answer

QUESTION: 

<input type="checkbox" name="roo">
<label for="roo">
  Kangaroo
</label>

SOLUTION:

NOTE: The solutions are expressed in RegEx pattern. Udacity uses these patterns to check the given answer

QUESTION: 

<span role="checkbox"
  aria-checked="false"
  aria-labelledby="label"
  aria-label="Not checked"></span>
<span id="label">Wallaby</span>

SOLUTION:

NOTE: The solutions are expressed in RegEx pattern. Udacity uses these patterns to check the given answer

Solution

Name That Element!

Next Concept